<template>
  <div>
    <!-- 查询功能开始 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-button type="success" @click="saveUI" size="mini">添加检查</el-button>
      <el-form-item label="检查项目" label-width="450px">
        <el-input
          v-model="formInline.checkName"
          placeholder="检查项目"
        ></el-input>
      </el-form-item>
      <el-form-item label="所属科室">
        <el-select
          v-model="formInline.deptId"
          clearable
          placeholder="请选择科室"
        >
          <el-option
            v-for="item in depts"
            :key="item.deptId"
            :label="item.deptName"
            :value="item.deptId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList" size="mini">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 查询功能结束 -->
    <!-- 列表开始 -->

    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="checkId" label="编号" width="180">
      </el-table-column>
      <el-table-column prop="checkName" label="检查项目名" width="180">
      </el-table-column>
      <el-table-column prop="description" label="说明" width="180">
      </el-table-column>
      <el-table-column prop="checkPrice" label="价钱" width="180">
      </el-table-column>
      <el-table-column prop="dept.deptName" label="所属科室" width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" @click="del(scope.row)" size="mini"
            >删除</el-button
          >
          <el-button type="info" @click="update(scope.row)" size="mini"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 列表结束 -->
    <!-- 分页开始 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 分页结束 -->
    <!-- 添加与修改模态框开始 -->
    <el-dialog :title="hint" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="检查项目" label-width="180px">
          <el-input v-model="form.checkName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="说明" label-width="180px">
          <el-input v-model="form.description" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格" label-width="180px">
          <el-input
            type="number"
            :min="0"
            :step="0.1"
            :precision="2"
            v-model="form.checkPrice"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属科室" label-width="180px">
          <el-select v-model="form.deptId" placeholder="请选择科室">
            <el-option
              v-for="item in depts"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitform">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加与修改模态框结束 -->
  </div>
</template>
<script>
import { findAll, del, saveAndUpdate } from "@/api/check/check.js";
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      total: 0,
      tableData: [], //所有信息展示
      depts: [], //科室下拉框
      form: {}, //添加、修改
      hint: "", //提示
      dialogFormVisible: false,
      formInline: {}, //查询用的
    };
  },
  mounted() {
    this.getList();
  },
    methods: {
        handleSizeChange(val) {
            this.pageSize = val;
            //console.log(`每页 ${val} 条`);
            this.getList();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            //console.log(`当前页: ${val}`);
            this.getList();
        },
        getList() {
            let date = this.formInline? 
            { pageNum: this.currentPage , pageSize: this.pageSize}:
                this.formInline.deptId ?
                {
                    checkName: this.formInline.checkName, 
                    deptId: this.formInline.deptId,
                    pageNum: this.currentPage , pageSize: this.pageSize
                }
                :
                { checkName: this.formInline.checkName,
                    pageNum: this.currentPage, pageSize: this.pageSize}
            findAll(date).then(res => {
                
                if (res.code === 200) {
                    this.tableData = res.data.pageInfo.list;
                    this.total = res.data.pageInfo.total;
                    this.depts = res.data.depts;
                }
            })
        },
        saveUI() {
            this.hint = "添加员工"
            this.form = {}
            this.dialogFormVisible = true;
        },
        update(row){
            this.hint = "修改员工"
            let obj = JSON.stringify(row);
            this.form=JSON.parse(obj);
            this.dialogFormVisible = true;
        },
        submitform() {
            let path = "check/save";
            this.form.checkId ? path = "check/update" : path;
            saveAndUpdate(path, this.form).then(res => {
                this.dialogFormVisible = false;
                this.form = {};
                if (res.code == 200) {
                    this.$message.success(res.msg);
                    this.getList();
                    return;
                }
                this.$message.error(res.msg);
            })
        },
        del(row) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                del(row.checkId).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg);
                        this.getList();
                        return;
                    }
                    this.$message.error(res.msg);
                });
            }).catch(() => {
                this.$message({
                    type: 'success',
                    message: '取消删除'
                });
            });

        },
    del(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          del(row.checkId).then((res) => {
            if (res.code == 200) {
              this.$message.success(res.msg);
              this.getList();
              return;
            }
            this.$message.error(res.msg);
          });
        })
        .catch(() => {
          this.$message({
            type: "success",
            message: "取消删除",
          });
        });
    },
    doFind() {
      this.getList();
    },
  },
};
</script>
<style  scoped></style>